<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 1000px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            background-color: #ddd;
        }

        .left{
            width: 300px ;
            background-color: #ff0;
        }
        .left1 {
            width: 200px;
            height: 200px;
            position: relative;
        }
        .left1 img {
            width: 200px;
            height: 200px;
        }
        .mask {
            width: 100px;
            height: 100px;
            background-color: rgba(255,0,0,0.5);
            position: absolute;
            left: 0;
            top: 0;
            visibility: hidden;
            cursor: move;
        }
        .right {
            width: 300px;
            height: 300px;
            background-color: #f00;
            overflow: hidden;
            position: relative;
        }
        .right img {
            width: 600px;
            height: 600px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box">

        <div class="left">
            <div class="left1">
                <img src="../images/1.jpg" alt="">
                <div class="mask"></div>
            </div>
        </div>
        <div class="right">
            <img src="../images/1.jpg" alt="">
        </div>

    </div>


    <script>

        // 放大镜 css注意    左图 / 遮罩层   =  右图 / 右盒子  =  (右图 / 左图  = 2)




        var oLeft = document.querySelector('.left1') ;
        var oMask = document.querySelector('.mask') ;
        var oRight = document.querySelector('.right') ;
        var oRightImg = document.querySelector('.right img') ;

        // 保证 left和box都没有写定位   如果写了  可以拿box的offsetLeft
        var leftWidth = oLeft.offsetLeft ;
        console.log(leftWidth);

        var topWidth = oLeft.offsetTop ; 
        console.log(topWidth);

        // 盒子的半径
        var r = oMask.offsetWidth / 2 ;

        // 最大的移动距离
        var maxX = oLeft.clientWidth - oMask.offsetWidth ;
        var maxY = oLeft.clientHeight - oMask.offsetHeight ;


        // 大图的移动范围
        var bigImg = oRightImg.clientWidth - oRight.offsetWidth ;

        var scale = bigImg / maxX ;




        // 鼠标移入移出
        oLeft.addEventListener('mouseover' , function() {
            oMask.style.visibility = 'visible' ;

            // 实现鼠标跟随
            document.onmousemove = function(e) {
                e = e || event ;
                var x = e.x - leftWidth - r ;
                var y = e.y - topWidth - r ;
                if(x < 0) x = 0 ; 
                if(x > maxX) x = maxX ;
                if(y < 0) y = 0 ; 
                if(y > maxY) y = maxY ; 
                // 遮罩层在移动
                oMask.style.cssText += `left:${x}px;top:${y}px` ;

                // 右边大图需要反方向移动
                oRightImg.style.cssText += `left:${-x * scale}px;top:${-y * scale}px` ;



            }


        })


        oLeft.addEventListener('mouseout' , function() {
            oMask.style.visibility = 'hidden' ;
            document.onmousemove = null ;
        })


    </script>
</body>
</html>